<template>
  <div class="navigator" :style="{ width: isDisplay ? '200px' : '0' }">
    <HNav
      ref="navRef"
      :data="menus"
      theme="default"
      :title="title"
    />
    <div
      class="switch_display_btn"
      :style="{ left: isDisplay ? '199px' : '0px' }"
      @click="switchDisplay"
    >
      <icon-right
        size="30"
        :style="{
          transition: 'all 0.3s ease',
          transform: isDisplay ? 'rotate(180deg)' : 'rotate(0deg)',
        }"
      />
    </div>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import HNav from "./external/H-Nav.vue";
import { markRaw, onMounted, onBeforeUnmount, watchEffect } from "vue";
import {
  IconHome,
  IconUserGroup,
  IconEye,
  IconNav,
  IconUpload,
} from "@arco-design/web-vue/es/icon";
import { ref } from "vue";
const router = useRouter();
const route = useRoute();
const navRef = ref(null);
let isDisplay = ref(true);
let title = import.meta.env.VITE_APP_TITLE;
const menus = [
  {
    label: "首页",
    path: "/index",
    icon: markRaw(IconHome),
  },
  {
    label: "培训管理",
    path: "/training",
    icon: markRaw(IconUserGroup),
  },
  {
    label: "用户管理",
    path: "/userManage",
    icon: markRaw(IconEye),
  },
  {
    label: "报名记录",
    path: "/enlists",
    icon: markRaw(IconNav),
  },
  {
    label: "视频列表",
    path: "/video",
    icon: markRaw(IconUpload),
  },
  {
    label: "系统设置",
    path: "/system",
    icon: markRaw(IconUpload),
  },
];
const switchDisplay = () => {  
  isDisplay.value = !isDisplay.value;
  // navRef.value.switchDisplay();
};
const handleWindowResize = () => {
  window.innerWidth < window.screen.availWidth / (3/2) ? isDisplay.value = false : isDisplay.value = true;
};

onMounted(() => {
  window.addEventListener("resize", handleWindowResize);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", handleWindowResize);
});
</script>
<style scoped>
.navigator {
  height: 100%;
  min-width: 0;
  width: 200px;
  flex-shrink: 0;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch_display_btn {
  position: absolute;
  height: 60px;
  width: 15px;
  border-radius: 0 10px 10px 0;
  top: 50%;
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  z-index: 1000;
}
</style>
